
                <!DOCTYPE html>
                <html lang="zh">
                <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>通知中心</title>
                  <style>
                    *,
                    *::before,
                    *::after {
                      box-sizing: border-box;
                      margin: 0;
                    }
                    .iframe-outer {
                      position: fixed;
                      top: 0;
                      left: 0;
                      bottom: 0;
                      right: 0;
                      display: flex;
                      justify-content: center;
                      background-color: #E0E0E0;
                    }
                    .iframe-wrapper {
                      width: 100%;
                      height: 100%;
                      margin: 0 auto;
                      transform-origin: center top;
                      flex-shrink: 0;
                    }
                    #dynamicIframe {
                      border: none;
                      width: 100%;
                      height: 100%;
                    }
                  </style>
                  <script>
                const width = 402
                const height = 874
                const resolutionRatio = width && height ? width / height : 1
                const pageNameMap = {
                  'splash_page': '启动页',
    'login_page': '登录页',
    'register_page': '注册页',
    'forgot_password_page': '忘记密码页',
    'main_account_home_page': '主账户首页',
    'associated_account_home_page': '关联账户首页',
    'personal_settings_page': '个人设置',
    'edit_profile_page': '编辑个人信息页',
    'change_password_page': '修改密码页',
    'account_management_page': '账户管理',
    'associated_account_detail_page': '关联账户详情',
    'edit_associated_account_page': '编辑关联账户页',
    'create_associated_account_page': '新建关联账户',
    'goal_list_page': '目标列表',
    'create_learning_goal_page': '创建学习目标',
    'create_life_goal_page': '创建生活目标',
    'learning_goal_detail_page': '学习目标详情',
    'edit_learning_goal_page': '编辑学习目标页',
    'life_goal_detail_page': '生活目标详情',
    'edit_life_goal_page': '编辑生活目标页',
    'plan_list_page': '计划列表',
    'create_study_plan_page': '创建学习计划',
    'study_plan_detail_page': '学习计划详情',
    'edit_study_plan_page': '编辑学习计划页',
    'goals_plans_dashboard_page': '目标计划看板',
    'comment_share_page': '点评分享页',
    'reward_management_page': '奖励管理',
    'my_plans_goals_page': '我的计划与目标',
    'wish_pool_page': '许愿池',
    'create_wish_page': '创建愿望页',
    'wish_detail_page': '愿望详情页',
    'points_level_title_page': '积分等级称号',
    'reward_history_page': '积分历史页',
    'notification_center_page': '通知中心'
                }
                function setIframeSize(w, h) {
                  const currentContainerRadio = w / h
                  let widthValue = w
                  let heightValue = h
                  let zoom = 1
                  if (currentContainerRadio > resolutionRatio) {
                    widthValue = h * resolutionRatio
                    heightValue = h
                  } else {
                    widthValue = w
                    heightValue = w / resolutionRatio
                  }
                  zoom = width ? widthValue / width : 1
                  return {
                    width: widthValue / zoom + 'px',
                    height: heightValue / zoom + 'px',
                    zoom,
                  }
                }
                function adjustIframeSize() {
                  const iframeWrapper = document.querySelector(".iframe-wrapper")
                  const { width, height, zoom } = setIframeSize(window.innerWidth, window.innerHeight)
                  iframeWrapper.style.height = height
                  iframeWrapper.style.width = width
                  iframeWrapper.style.transform = 'scale(' + zoom + ')'
                }
                function sanitizeFilename(name) {
                  return name.replace(/[\/:*?"<>|]/g, '_')
                }
                function handlePostMessage(event) {
                  if (!event.data) {
                    return
                  }
                  const { type, targetPageId } = event.data
                  const targetPageName = pageNameMap[targetPageId]
                  if (type === "iframeNavigation" && targetPageId && targetPageName) {
                    window.location.href = targetPageName + '.html'
                  }
                }
                window.addEventListener('message', handlePostMessage)
                window.onload = adjustIframeSize
                window.onresize = adjustIframeSize
                window.onunload = () => {
                  window.removeEventListener('message', handlePostMessage)
                }
              </script>
                </head>
                <body>
                  <div class="iframe-outer">
                    <div class="iframe-wrapper">
                      <iframe id="dynamicIframe" srcdoc='<html lang="zh-CN" data-theme="business"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>通知中心</title>
    <link href="./assets/static/uxbot/daisyui@5.css" rel="stylesheet" type="text/css">
    <script src="./assets/static/uxbot/tailwind-browser@4.js"></script>
    <link href="./assets/static/uxbot/daisyui-themes.css" rel="stylesheet" type="text/css">
    <script src="./assets/3/3.1.1/iconify.min.js"></script>
    <style>
/* DaisyUI Theme Variables Customization for Learning Assistant App */
/* Based on the business theme with Material Design Dark Theme grey levels */
:root {
    /* 学习助手主题色彩定制 */
    --color-primary: rgba(59, 130, 246, 1); /* 学习主题蓝色 */
    --color-primary-content: rgba(255, 255, 255, 1);
    --color-secondary: rgba(99, 102, 241, 1); /* 辅助紫色 */
    --color-secondary-content: rgba(255, 255, 255, 1);
    --color-accent: rgba(34, 197, 94, 1); /* 成功绿色 */
    --color-accent-content: rgba(255, 255, 255, 1);
    --color-success: rgba(34, 197, 94, 1);
    --color-warning: rgba(251, 191, 36, 1);
    --color-error: rgba(239, 68, 68, 1);
    --color-info: rgba(59, 130, 246, 1);
    --color-base-100: rgba(38, 38, 38, 1); /* Material Design 深灰 */
    --color-base-200: rgba(30, 30, 30, 1);
    --color-base-300: rgba(23, 23, 23, 1);
    --color-base-content: rgba(248, 248, 248, 1);
    --radius-box: 0.75rem;
    --radius-field: 0.5rem;
}

/* 移动端安全区域适配 */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 24px);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 80px);
}

/* 底部导航栏样式 */
.bottom-dock {
    height: 64px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 顶部导航栏样式 */
.top-navbar {
    height: 56px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 触摸目标最小尺寸 */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* 卡片样式 */
.learning-card {
    border-radius: var(--radius-box);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 动画过渡 */
.smooth-transition {
    transition: all 0.2s ease-in-out;
}

/* 积分等级样式 */
.points-badge {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-primary-content);
    border-radius: var(--radius-field);
}

/* 目标完成度进度条 */
.goal-progress {
    height: 8px;
    border-radius: 4px;
    background: var(--color-base-200);
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), var(--color-accent));
    transition: width 0.3s ease-in-out;
}

/* 任务提醒面板 */
.task-reminder-panel {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
}

.task-reminder-panel.hidden {
    transform: translateY(100%);
}
</style>
    <style>
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-item {
    animation: fade-in-up 0.5s ease-out forwards;
    opacity: 0;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.notification-item:hover {
    transform: translateY(-2px);
}

/* Staggered animation delay */
.notification-item:nth-child(2) { animation-delay: 0.05s; }
.notification-item:nth-child(3) { animation-delay: 0.1s; }
.notification-item:nth-child(4) { animation-delay: 0.15s; }
.notification-item:nth-child(5) { animation-delay: 0.2s; }
</style>
<script src="./assets/static/uxbot/25_6/holder.js"></script></head>
<body class="bg-base-300 min-h-screen flex flex-col font-sans">
    
    <div data-section-id="common_top_navbar" data-section-type="common_header">
    <div class="fixed top-0 left-0 right-0 z-50 bg-base-300/95 top-navbar border-b border-base-content/10 safe-area-top">
        <div class="flex items-center justify-between px-4 h-14">
            <!-- 左侧导航按钮 -->
            <button class="btn btn-ghost btn-sm touch-target" onclick="handleBackNavigation()">
                <span class="iconify" data-icon="heroicons:arrow-left" data-width="24"></span>
            </button>
            
            <!-- 中间标题 -->
            <h1 class="text-lg font-semibold truncate flex-1 text-center px-4 navbar-title">学习助手</h1>
            
            <!-- 右侧操作按钮 -->
            <div class="flex items-center space-x-2 navbar-actions">
                <button class="btn btn-ghost btn-sm touch-target hidden" data-action="notifications" onclick="navigateTo(&#39;notification_center_page&#39;)">
                    <div class="indicator">
                        <span class="indicator-item badge badge-error badge-xs notification-badge hidden"></span>
                        <span class="iconify" data-icon="heroicons:bell" data-width="24"></span>
                    </div>
                </button>
                
                <button class="btn btn-ghost btn-sm touch-target hidden" data-action="search">
                    <span class="iconify" data-icon="heroicons:magnifying-glass" data-width="24"></span>
                </button>
                
                <button class="btn btn-ghost btn-sm touch-target hidden" data-action="more">
                    <span class="iconify" data-icon="heroicons:ellipsis-horizontal" data-width="24"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
[data-section-id="common_top_navbar"] .navbar-title {
    color: var(--color-base-content);
}

[data-section-id="common_top_navbar"] .notification-badge {
    animation: pulse 2s infinite;
}
</style>

<script>
(function() {
    // 顶部导航栏配置函数
    window.configTopNavbar = function(options = {}) {
        const navbar = document.querySelector(&#39;[data-section-id="common_top_navbar"]&#39;);
        if (!navbar) return;

        const title = navbar.querySelector(&#39;.navbar-title&#39;);
        const backBtn = navbar.querySelector(&#39;button[onclick*="handleBackNavigation"]&#39;);
        const notificationBtn = navbar.querySelector(&#39;[data-action="notifications"]&#39;);
        const searchBtn = navbar.querySelector(&#39;[data-action="search"]&#39;);
        const moreBtn = navbar.querySelector(&#39;[data-action="more"]&#39;);

        // 设置标题
        if (options.title) {
            title.textContent = options.title;
        }

        // 显示/隐藏返回按钮
        if (options.showBack !== undefined) {
            backBtn.style.display = options.showBack ? &#39;flex&#39; : &#39;none&#39;;
        }

        // 配置通知按钮
        if (options.showNotifications !== undefined) {
            notificationBtn.classList.toggle(&#39;hidden&#39;, !options.showNotifications);
        }

        // 配置搜索按钮
        if (options.showSearch) {
            searchBtn.classList.remove(&#39;hidden&#39;);
            searchBtn.onclick = options.searchAction || (() => {});
        } else if (options.showSearch === false) {
            searchBtn.classList.add(&#39;hidden&#39;);
        }

        // 配置更多按钮
        if (options.showMore) {
            moreBtn.classList.remove(&#39;hidden&#39;);
            moreBtn.onclick = options.moreAction || (() => {});
        } else if (options.showMore === false) {
            moreBtn.classList.add(&#39;hidden&#39;);
        }

        // 显示/隐藏整个导航栏
        if (options.show !== undefined) {
            navbar.style.display = options.show ? &#39;block&#39; : &#39;none&#39;;
        }
    };

    // 更新通知徽章
    window.updateNotificationBadge = function(count) {
        const badge = document.querySelector(&#39;[data-section-id="common_top_navbar"] .notification-badge&#39;);
        if (badge) {
            if (count > 0) {
                badge.classList.remove(&#39;hidden&#39;);
                badge.textContent = count > 99 ? &#39;99+&#39; : count.toString();
            } else {
                badge.classList.add(&#39;hidden&#39;);
            }
        }
    };

    // 隐藏导航栏函数
    window.hideTopNavbar = function() {
        const navbar = document.querySelector(&#39;[data-section-id="common_top_navbar"]&#39;);
        if (navbar) {
            navbar.style.display = &#39;none&#39;;
        }
    };

    // 显示导航栏函数
    window.showTopNavbar = function() {
        const navbar = document.querySelector(&#39;[data-section-id="common_top_navbar"]&#39;);
        if (navbar) {
            navbar.style.display = &#39;block&#39;;
        }
    };
})();
</script>

    <main id="NotificationList" class="flex-1 pt-14 pb-16 overflow-y-auto">
        <div class="p-4">
            <!-- Filter Tabs -->
            <div data-type="container">
                <div role="tablist" class="tabs tabs-boxed bg-base-100/10 p-1 mb-6">
                    <a role="tab" class="tab tab-active" onclick="filterNotifications(&#39;all&#39;)">全部</a>
                    <a role="tab" class="tab" onclick="filterNotifications(&#39;system&#39;)">系统通知</a>
                    <a role="tab" class="tab" onclick="filterNotifications(&#39;ai&#39;)">AI助手</a>
                    <a role="tab" class="tab" onclick="filterNotifications(&#39;unread&#39;)">未读</a>
                </div>
            </div>

            <div class="space-y-8">
                <!-- 今日通知 -->
                <section data-date-group="today" class="space-y-4">
                    <h3 class="text-sm font-semibold text-base-content/60 px-2" data-type="text">今天</h3>
                    <!-- Important Notification -->
                    <div data-repeatable="true" data-type="container" class="notification-item bg-primary/10 rounded-lg shadow-sm p-4 border-l-4 border-primary" data-category="ai" data-status="unread">
                        <div class="flex items-start gap-4">
                            <div class="bg-primary/20 rounded-full w-10 h-10 flex items-center justify-center shrink-0">
                                <span class="iconify text-primary" data-icon="heroicons:bell-alert" data-width="22" data-type="icon"></span>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-base-content" data-type="text">学习计划提醒</p>
                                <p class="text-sm text-base-content/80 mt-1" data-type="text">您的「高等数学复习」计划今天有学习任务，请别忘记完成哦！</p>
                            </div>
                            <div class="w-2 h-2 bg-error rounded-full shrink-0 mt-1" data-type="indicator" title="未读"></div>
                        </div>
                        <div class="text-right text-xs text-base-content/50 mt-2" data-type="text">
                            <span>2小时前</span>
                        </div>
                    </div>
                    <!-- System Notification -->
                    <div data-repeatable="true" data-type="container" class="notification-item bg-base-200 rounded-lg shadow-sm p-4" data-category="system" data-status="read">
                        <div class="flex items-start gap-4">
                            <div class="bg-info/20 rounded-full w-10 h-10 flex items-center justify-center shrink-0">
                                <span class="iconify text-info" data-icon="heroicons:cog-6-tooth" data-width="22" data-type="icon"></span>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-base-content" data-type="text">系统更新通知</p>
                                <p class="text-sm text-base-content/70 mt-1" data-type="text">您的应用已更新至最新版本，带来了性能优化和新功能。</p>
                            </div>
                        </div>
                        <div class="text-right text-xs text-base-content/50 mt-2" data-type="text">
                            <span>5小时前</span>
                        </div>
                    </div>
                </section>

                <!-- 昨日通知 -->
                <section data-date-group="yesterday" class="space-y-4">
                    <h3 class="text-sm font-semibold text-base-content/60 px-2" data-type="text">昨天</h3>
                    <!-- AI Notification -->
                    <div data-repeatable="true" data-type="container" class="notification-item bg-base-200 rounded-lg shadow-sm p-4" data-category="ai" data-status="read">
                        <div class="flex items-start gap-4">
                            <div class="bg-success/20 rounded-full w-10 h-10 flex items-center justify-center shrink-0">
                                <span class="iconify text-success" data-icon="heroicons:check-badge" data-width="22" data-type="icon"></span>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-base-content" data-type="text">目标完成！</p>
                                <p class="text-sm text-base-content/70 mt-1" data-type="text">恭喜！您已成功完成「每周阅读三小时」的生活目标。获得了200积分奖励！</p>
                            </div>
                        </div>
                        <div class="text-right text-xs text-base-content/50 mt-2" data-type="text">
                            <span>昨天 18:30</span>
                        </div>
                    </div>
                     <!-- Unread System Notification -->
                    <div data-repeatable="true" data-type="container" class="notification-item bg-base-200 rounded-lg shadow-sm p-4" data-category="system" data-status="unread">
                        <div class="flex items-start gap-4">
                            <div class="bg-warning/20 rounded-full w-10 h-10 flex items-center justify-center shrink-0">
                                <span class="iconify text-warning" data-icon="heroicons:shield-exclamation" data-width="22" data-type="icon"></span>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-base-content" data-type="text">安全提示</p>
                                <p class="text-sm text-base-content/70 mt-1" data-type="text">我们发现您的账户在一个新设备上登录。如果不是您本人操作，请立即修改密码。</p>
                            </div>
                             <div class="w-2 h-2 bg-error rounded-full shrink-0 mt-1" data-type="indicator" title="未读"></div>
                        </div>
                        <div class="text-right text-xs text-base-content/50 mt-2" data-type="text">
                            <span>昨天 09:15</span>
                        </div>
                    </div>
                </section>

                <!-- 更早的通知 -->
                <section data-date-group="earlier" class="space-y-4">
                    <h3 class="text-sm font-semibold text-base-content/60 px-2" data-type="text">更早</h3>
                    <div data-repeatable="true" data-type="container" class="notification-item bg-base-200 rounded-lg shadow-sm p-4" data-category="system" data-status="read">
                        <div class="flex items-start gap-4">
                            <div class="bg-secondary/20 rounded-full w-10 h-10 flex items-center justify-center shrink-0">
                                <span class="iconify text-secondary" data-icon="heroicons:gift" data-width="22" data-type="icon"></span>
                            </div>
                            <div class="flex-grow">
                                <p class="font-semibold text-base-content" data-type="text">新愿望已兑现</p>
                                <p class="text-sm text-base-content/70 mt-1" data-type="text">您许下的「一个新篮球」愿望已被主账户批准并兑现，快去看看吧！</p>
                            </div>
                        </div>
                        <div class="text-right text-xs text-base-content/50 mt-2" data-type="text">
                            <span>2025-08-25</span>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>
    
    <div data-section-id="common_bottom_dock" data-section-type="common_footer">
    <div class="fixed bottom-0 left-0 right-0 z-40 bg-base-300/95 bottom-dock border-t border-base-content/10">
        <div class="flex justify-around items-center h-full px-2">
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="home" onclick="navigateTo(getUserType() === &#39;main_account&#39; ? &#39;main_account_home_page&#39; : &#39;associated_account_home_page&#39;)">
                <span class="iconify" data-icon="heroicons:home" data-width="24"></span>
                <span class="text-xs mt-1">首页</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="goals" onclick="navigateTo(&#39;goal_list_page&#39;)">
                <span class="iconify" data-icon="heroicons:academic-cap" data-width="24"></span>
                <span class="text-xs mt-1">目标</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="plans" onclick="navigateTo(&#39;plan_list_page&#39;)">
                <span class="iconify" data-icon="heroicons:calendar-days" data-width="24"></span>
                <span class="text-xs mt-1">计划</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="points" onclick="navigateTo(getUserType() === &#39;main_account&#39; ? &#39;reward_management_page&#39; : &#39;points_level_title_page&#39;)">
                <span class="iconify" data-icon="heroicons:star" data-width="24"></span>
                <span class="text-xs mt-1">积分</span>
            </button>
            
            <button class="dock-item flex flex-col items-center justify-center touch-target smooth-transition text-base-content px-2 py-1 rounded-lg" data-nav-id="profile" onclick="navigateTo(&#39;personal_settings_page&#39;)">
                <span class="iconify" data-icon="heroicons:user" data-width="24"></span>
                <span class="text-xs mt-1">我的</span>
            </button>
        </div>
    </div>
</div>

<style>
[data-section-id="common_bottom_dock"] .dock-item:hover {
    background-color: rgba(var(--color-primary), 0.1);
    color: var(--color-primary);
}

[data-section-id="common_bottom_dock"] .dock-item.active {
    background-color: rgba(var(--color-primary), 0.1);
    color: var(--color-primary);
}
</style>

<script>
(function() {
    // 底部导航栏功能已在common_script中定义
    
    // 页面加载时设置活跃导航项
    document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
        // 可以根据当前页面URL来设置活跃状态
        const currentPage = window.location.pathname.split(&#39;/&#39;).pop().replace(&#39;.html&#39;, &#39;&#39;);
        setActiveNavItem(currentPage);
    });
})();
</script>
    <div data-section-id="common_task_reminder" data-section-type="common_section">
    <div class="fixed bottom-16 left-0 right-0 z-30 bg-base-200/95 task-reminder-panel border-t border-base-content/10 hidden">
        <div class="flex items-center p-4">
            <!-- 任务图标 -->
            <div class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center">
                <span class="iconify text-primary" data-icon="heroicons:clock" data-width="24"></span>
            </div>
            
            <!-- 任务信息 -->
            <div class="flex-1 mx-3 min-w-0">
                <p class="text-sm font-medium truncate task-title">即将开始任务</p>
                <div class="flex items-center gap-2 text-xs text-base-content/70">
                    <span class="task-subject">数学</span>
                    <span>·</span>
                    <span class="task-time">14:00 - 15:00</span>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="flex items-center space-x-2 flex-shrink-0">
                <button class="btn btn-ghost btn-sm btn-circle touch-target" onclick="taskReminderControl.hide()">
                    <span class="iconify" data-icon="heroicons:x-mark" data-width="16"></span>
                </button>
                
                <button class="btn btn-primary btn-sm" onclick="navigateTo(&#39;my_plans_goals_page&#39;)">
                    查看详情
                </button>
            </div>
        </div>
    </div>
</div>

<style>
[data-section-id="common_task_reminder"] .task-reminder-panel:hover {
    background-color: rgba(var(--color-base-200), 1);
}
</style>

<script>
(function() {
    // 任务提醒面板功能已在common_script中定义
    
    // 模拟AI助手任务提醒
    window.simulateTaskReminder = function() {
        const sampleTasks = [
            { title: &#39;数学作业练习&#39;, subject: &#39;数学&#39;, time: &#39;14:00 - 15:00&#39; },
            { title: &#39;英语单词背诵&#39;, subject: &#39;英语&#39;, time: &#39;16:00 - 16:30&#39; },
            { title: &#39;阅读理解训练&#39;, subject: &#39;语文&#39;, time: &#39;19:00 - 19:45&#39; }
        ];
        
        const randomTask = sampleTasks[Math.floor(Math.random() * sampleTasks.length)];
        taskReminderControl.show(randomTask);
        
        // 5秒后自动隐藏
        setTimeout(() => {
            taskReminderControl.hide();
        }, 5000);
    };
})();
</script>
    <div data-section-id="common_toast" data-section-type="common_section">
    <div id="global-toast-container" class="toast toast-top toast-center z-50">
        <!-- Toast消息将动态插入到这里 -->
    </div>
</div>

<style>
[data-section-id="common_toast"] .toast {
    padding-top: env(safe-area-inset-top, 24px);
}

[data-section-id="common_toast"] .alert {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-field);
}
</style>

<script>
(function() {
    // Toast功能已在common_script中定义
})();
</script>
    <div data-section-id="common_modal" data-section-type="common_section">
  <dialog id="global-modal" class="modal">
    <div class="modal-box bg-base-200">
      <h3 class="font-bold text-lg modal-title">提示</h3>
      <div class="py-4 modal-content"><!-- 弹窗内容将动态插入到这里 --></div>
      <div class="modal-action modal-actions">
        <button class="btn" onclick="document.getElementById(&#39;global-modal&#39;).close()">
          关闭
        </button>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>close</button></form>
  </dialog>
</div>


    <script>
(function() {
    // 全局命名空间
    window.APP_GLOBALS = window.APP_GLOBALS || {};
    
    // 全局导航函数
    window.navigateTo = function(targetPageId) {
        const isInIframe = window.self !== window.top;
        const targetFileName = `${targetPageId}.html`;
        
        if (isInIframe) {
            window.parent.postMessage({
                type: &#39;iframeNavigation&#39;,
                targetPageId: targetPageId
            }, &#39;*&#39;);
        } else {
            window.location.href = targetFileName;
        }
    };

    // 全局Toast通知系统
    window.showToast = function(message, type = &#39;info&#39;, duration = 3000) {
        const toastContainer = document.getElementById(&#39;global-toast-container&#39;);
        if (!toastContainer) return;

        const toast = document.createElement(&#39;div&#39;);
        toast.className = `alert alert-${type} shadow-lg`;
        
        const iconMap = {
            &#39;info&#39;: &#39;heroicons:information-circle&#39;,
            &#39;success&#39;: &#39;heroicons:check-circle&#39;,
            &#39;warning&#39;: &#39;heroicons:exclamation-triangle&#39;,
            &#39;error&#39;: &#39;heroicons:x-circle&#39;
        };
        
        toast.innerHTML = `
            <span class="iconify" data-icon="${iconMap[type] || iconMap.info}" data-width="20"></span>
            <span>${message}</span>
        `;
        
        toastContainer.appendChild(toast);

        // 自动移除
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, duration);
    };

    // 全局Modal系统
    window.showModal = function(title, content, buttons = []) {
        const modal = document.getElementById(&#39;global-modal&#39;);
        const modalTitle = modal.querySelector(&#39;.modal-title&#39;);
        const modalContent = modal.querySelector(&#39;.modal-content&#39;);
        const modalActions = modal.querySelector(&#39;.modal-actions&#39;);

        modalTitle.textContent = title;
        modalContent.innerHTML = content;

        // 清空并设置按钮
        modalActions.innerHTML = &#39;&#39;;
        buttons.forEach(button => {
            const btn = document.createElement(&#39;button&#39;);
            btn.className = `btn ${button.class || &#39;btn-primary&#39;}`;
            btn.textContent = button.text;
            btn.onclick = button.action || (() => modal.close());
            modalActions.appendChild(btn);
        });

        modal.showModal();
    };

    // 任务提醒面板控制
    window.taskReminderControl = {
        show: function(taskInfo) {
            const panel = document.querySelector(&#39;[data-section-id="common_task_reminder"]&#39;);
            if (panel) {
                panel.classList.remove(&#39;hidden&#39;);
                this.updateTask(taskInfo);
            }
        },
        hide: function() {
            const panel = document.querySelector(&#39;[data-section-id="common_task_reminder"]&#39;);
            if (panel) {
                panel.classList.add(&#39;hidden&#39;);
            }
        },
        updateTask: function(taskInfo) {
            const panel = document.querySelector(&#39;[data-section-id="common_task_reminder"]&#39;);
            if (panel &amp;&amp; taskInfo) {
                const titleEl = panel.querySelector(&#39;.task-title&#39;);
                const timeEl = panel.querySelector(&#39;.task-time&#39;);
                const subjectEl = panel.querySelector(&#39;.task-subject&#39;);
                
                if (titleEl) titleEl.textContent = taskInfo.title || &#39;即将开始任务&#39;;
                if (timeEl) timeEl.textContent = taskInfo.time || &#39;&#39;;
                if (subjectEl) subjectEl.textContent = taskInfo.subject || &#39;&#39;;
            }
        }
    };

    // 底部导航激活状态
    window.setActiveNavItem = function(pageId) {
        const navItems = document.querySelectorAll(&#39;[data-section-id="common_bottom_dock"] .dock-item&#39;);
        navItems.forEach(item => {
            item.classList.remove(&#39;text-primary&#39;, &#39;bg-primary/10&#39;);
            item.classList.add(&#39;text-base-content&#39;);
        });

        // 页面与导航项映射
        const navMapping = {
            &#39;main_account_home_page&#39;: &#39;home&#39;,
            &#39;associated_account_home_page&#39;: &#39;home&#39;,
            &#39;goal_list_page&#39;: &#39;goals&#39;,
            &#39;create_learning_goal_page&#39;: &#39;goals&#39;,
            &#39;create_life_goal_page&#39;: &#39;goals&#39;,
            &#39;plan_list_page&#39;: &#39;plans&#39;,
            &#39;create_study_plan_page&#39;: &#39;plans&#39;,
            &#39;goals_plans_dashboard_page&#39;: &#39;dashboard&#39;,
            &#39;points_level_title_page&#39;: &#39;points&#39;,
            &#39;reward_management_page&#39;: &#39;points&#39;,
            &#39;personal_settings_page&#39;: &#39;profile&#39;,
            &#39;account_management_page&#39;: &#39;profile&#39;
        };

        const activeNavId = navMapping[pageId];
        if (activeNavId) {
            const activeItem = document.querySelector(`[data-nav-id="${activeNavId}"]`);
            if (activeItem) {
                activeItem.classList.remove(&#39;text-base-content&#39;);
                activeItem.classList.add(&#39;text-primary&#39;, &#39;bg-primary/10&#39;);
            }
        }
    };

    // 用户类型检测 (可以根据实际登录状态来判断)
    window.getUserType = function() {
        // 这里应该根据实际的用户登录状态来判断
        // 暂时返回主账户类型作为默认值
        return APP_GLOBALS.userType || &#39;main_account&#39;;
    };

    // 积分更新函数
    window.updatePoints = function(points, level, title) {
        APP_GLOBALS.userPoints = points;
        APP_GLOBALS.userLevel = level;
        APP_GLOBALS.userTitle = title;
        
        // 更新页面中的积分显示
        const pointsElements = document.querySelectorAll(&#39;.user-points&#39;);
        pointsElements.forEach(el => {
            el.textContent = points;
        });
    };

    // 返回上一页函数
    window.handleBackNavigation = function() {
        if (window.history.length > 1) {
            window.history.back();
        } else {
            // 如果没有历史记录，根据用户类型跳转到对应首页
            const userType = getUserType();
            if (userType === &#39;main_account&#39;) {
                navigateTo(&#39;main_account_home_page&#39;);
            } else {
                navigateTo(&#39;associated_account_home_page&#39;);
            }
        }
    };
})();
</script>
    <script>
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    // 配置顶部导航栏
    if (window.configTopNavbar) {
        window.configTopNavbar({
            title: &#39;通知中心&#39;,
            showBack: true,
            showNotifications: false,
            showSearch: false,
            showMore: false
        });
    }

    // 设置底部导航栏的活跃项
    if (window.setActiveNavItem) {
        // notification_center_page is under associated account workflow, associated with &#39;home&#39;.
        window.setActiveNavItem(&#39;associated_account_home_page&#39;);
    }
});

// 筛选通知的函数
function filterNotifications(category) {
    const allNotifications = document.querySelectorAll(&#39;.notification-item&#39;);
    const tabs = document.querySelectorAll(&#39;.tabs .tab&#39;);

    // 更新 active tab
    tabs.forEach(tab => {
        if (tab.textContent.toLowerCase().includes(category) || (category === &#39;all&#39; &amp;&amp; tab.textContent === &#39;全部&#39;)) {
            tab.classList.add(&#39;tab-active&#39;);
        } else {
            tab.classList.remove(&#39;tab-active&#39;);
        }
    });


    // 显示或隐藏通知
    allNotifications.forEach(item => {
        const itemCategory = item.getAttribute(&#39;data-category&#39;);
        const itemStatus = item.getAttribute(&#39;data-status&#39;);
        
        // 先隐藏，再判断是否要显示
        item.style.display = &#39;none&#39;;

        let shouldShow = false;
        if (category === &#39;all&#39;) {
            shouldShow = true;
        } else if (category === &#39;system&#39; &amp;&amp; itemCategory === &#39;system&#39;) {
            shouldShow = true;
        } else if (category === &#39;ai&#39; &amp;&amp; itemCategory === &#39;ai&#39;) {
            shouldShow = true;
        } else if (category === &#39;unread&#39; &amp;&amp; itemStatus === &#39;unread&#39;) {
            shouldShow = true;
        }

        if (shouldShow) {
            item.style.display = &#39;block&#39;;
        }
    });

    // 检查并显示或隐藏日期分组标题
    const dateGroups = document.querySelectorAll(&#39;section[data-date-group]&#39;);
    dateGroups.forEach(group => {
        const visibleItems = group.querySelectorAll(&#39;.notification-item[style*="display: block"]&#39;);
        if (visibleItems.length > 0) {
            group.style.display = &#39;block&#39;;
        } else {
            group.style.display = &#39;none&#39;;
        }
    });
}

/**
 * 处理通知删除的占位函数。
 * 在实际应用中，这里会包含触发动画、调用API和从DOM中移除元素的逻辑。
 * @param {HTMLElement} notificationElement 要删除的通知元素
 */
function handleDeleteNotification(notificationElement) {
    // 示例：向用户确认
    window.showModal(
        &#39;删除通知&#39;,
        &#39;您确定要删除这条通知吗？此操作无法撤销。&#39;,
        [
            {
                text: &#39;取消&#39;,
                class: &#39;btn-ghost&#39;,
                action: () => document.getElementById(&#39;global-modal&#39;).close()
            },
            {
                text: &#39;删除&#39;,
                class: &#39;btn-error&#39;,
                action: () => {
                    // 实际删除逻辑
                    notificationElement.style.transition = &#39;opacity 0.3s ease, transform 0.3s ease&#39;;
                    notificationElement.style.opacity = &#39;0&#39;;
                    notificationElement.style.transform = &#39;translateX(100%)&#39;;
                    setTimeout(() => {
                        notificationElement.remove();
                        window.showToast(&#39;通知已删除&#39;, &#39;success&#39;);
                    }, 300);
                    document.getElementById(&#39;global-modal&#39;).close();
                }
            }
        ]
    );
}

// 示例：为第一个通知项添加一个点击删除的事件监听器以作演示
document.addEventListener(&#39;DOMContentLoaded&#39;, () => {
    const firstNotification = document.querySelector(&#39;.notification-item&#39;);
    if (firstNotification) {
        // 在真实项目中，应该使用滑动手势库来触发
        // firstNotification.addEventListener(&#39;click&#39;, () => handleDeleteNotification(firstNotification));
    }
});

</script>

<script>
    setTimeout(() => {
      Holder.run({
        domain: "placehold.co"
      })
    }, 100)
  </script></body></html>'></iframe>
                    </div>
                  </div>

                </body>
                </html>
            